<template>
    <h3>ToRefs</h3>
    <p>name: {{data.name}}</p>
    <p>age: {{data.age}}</p>
    <hr>
    <p>name: {{name}}</p>
    <p>age: {{age}}</p>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
    name: 'ToRefs',
    setup(props, ctx) {
        console.log('ToRefs setup', props, ctx);

        /* 定义深度监听的响应式对象 */
        const dataObj = reactive({
            name: "steve",
            age: 18
        })

        // 将dataObj转化为一堆地址/引用
        // 转化结果就是与key同名的ref引用/地址
        const {name,age} = toRefs(dataObj)

        // 改变响应式数据的值
        setInterval(() => {
            dataObj.age++
        }, 1000);

        /* 暴露给模板的数据 */
        return {
            data: dataObj,

            // name,
            // age,

            // 将对象拍碎为一堆key-value
            ...toRefs(dataObj)
        }
    }
}
</script>